<#if settings.sidebar_style?? && settings.sidebar_style == 'arc'>
<style type='text/css'>
.page-top {
    background-color: #f8f8f8;
}
</style>
</#if>

<div class="page-top">
    <div class="columns left-nav">
        <a id="sidebar_trigger">
            <svg width="22" height="17" viewBox="0 0 22 17" >
            <path d="M21.5 8.5C21.5 8.73206 21.4078 8.95462 21.2437 9.11872C21.0796 9.28281 20.8571 9.375 20.625 9.375H1.375C1.14294 9.375 0.920376 9.28281 0.756282 9.11872C0.592187 8.95462 0.5 8.73206 0.5 8.5C0.5 8.26794 0.592187 8.04538 0.756282 7.88128C0.920376 7.71719 1.14294 7.625 1.375 7.625H20.625C20.8571 7.625 21.0796 7.71719 21.2437 7.88128C21.4078 8.04538 21.5 8.26794 21.5 8.5ZM1.375 2.375H20.625C20.8571 2.375 21.0796 2.28281 21.2437 2.11872C21.4078 1.95462 21.5 1.73206 21.5 1.5C21.5 1.26794 21.4078 1.04538 21.2437 0.881282C21.0796 0.717187 20.8571 0.625 20.625 0.625H1.375C1.14294 0.625 0.920376 0.717187 0.756282 0.881282C0.592187 1.04538 0.5 1.26794 0.5 1.5C0.5 1.73206 0.592187 1.95462 0.756282 2.11872C0.920376 2.28281 1.14294 2.375 1.375 2.375ZM20.625 14.625H1.375C1.14294 14.625 0.920376 14.7172 0.756282 14.8813C0.592187 15.0454 0.5 15.2679 0.5 15.5C0.5 15.7321 0.592187 15.9546 0.756282 16.1187C0.920376 16.2828 1.14294 16.375 1.375 16.375H20.625C20.8571 16.375 21.0796 16.2828 21.2437 16.1187C21.4078 15.9546 21.5 15.7321 21.5 15.5C21.5 15.2679 21.4078 15.0454 21.2437 14.8813C21.0796 14.7172 20.8571 14.625 20.625 14.625Z"></path>
            </svg>
        </a>
        <a class="searchbtn btn_off">
            <svg viewBox="0 0 24 23" xmlns="http://www.w3.org/2000/svg" role="img">
            <path d="M23.143 21.3981L18.407 16.6731C20.0785 14.6831 20.9172 12.1247 20.7482 9.53135C20.5792 6.93803 19.4155 4.51008 17.4999 2.75387C15.5843 0.997656 13.0646 0.048787 10.4664 0.105158C7.8682 0.16153 5.39206 1.21879 3.55442 3.05643C1.71678 4.89407 0.659516 7.37021 0.603144 9.96842C0.546773 12.5666 1.49564 15.0863 3.25185 17.0019C5.00806 18.9175 7.43602 20.0812 10.0293 20.2502C12.6227 20.4192 15.1811 19.5805 17.1711 17.909L21.8961 22.645C22.0633 22.8067 22.2869 22.8971 22.5195 22.8971C22.7522 22.8971 22.9757 22.8067 23.143 22.645C23.3073 22.4791 23.3994 22.255 23.3994 22.0215C23.3994 21.788 23.3073 21.564 23.143 21.3981V21.3981ZM2.39452 10.209C2.39452 8.56498 2.88204 6.95784 3.79543 5.59086C4.70882 4.22387 6.00705 3.15844 7.52596 2.52928C9.04488 1.90013 10.7162 1.73552 12.3287 2.05625C13.9412 2.37699 15.4223 3.16868 16.5848 4.33121C17.7474 5.49373 18.5391 6.97488 18.8598 8.58735C19.1805 10.1998 19.0159 11.8712 18.3868 13.3901C17.7576 14.909 16.6922 16.2072 15.3252 17.1206C13.9582 18.034 12.3511 18.5215 10.707 18.5215C8.5033 18.5186 6.39066 17.6419 4.83239 16.0837C3.27412 14.5254 2.39741 12.4128 2.39452 10.209V10.209Z"></path>
            </svg>
        </a>
        <#if is_post??>
            <a class="menu-open-icon" id="moonMenu">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 1 24 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book-open">
                    <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                    <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
                </svg>
            </a>
        </#if >
    </div>
    <div class="columns blog_title">
        <div>
        <a href="${blog_url!}">${blog_title!}</a>
        </div>
    </div>
    <div class="columns right-nav">
    </div>
</div>
<#include "search_page.ftl">

<script>
var search_btn = document.querySelector('.searchbtn');
var search_page = document.querySelector('.search-page');
var close_page = document.querySelector('.close-search')

search_btn.onclick = function () {
    search_page.style.display="unset";
}

close_page.onclick = function (){
    search_page.style.display="none";
}
 
</script>